<template>
    <div>
        <CsModal ref="CSModal" :modalData="modalData" @closeWin="closeWin"></CsModal>
        <div>
            <Button @click="openWin">创建modal</Button>
            <Button @click="hideWin">隐藏modal</Button>
            <Button @click="closeWin">关闭modal</Button>
        </div>
    </div>
</template>

<script>
import random from "string-random";
export default {
    name:'demo1',
    data () {
        return {
            optionId:null,
            randomId:null,
            modalData:{},
            param:{
                CSata:123,
                opCSataion:'editor'
            }
        }
    },
    methods: {
        sayHello(result){
            console.log(result);
        },
        openWin(){
            this.randomId = random(16);
            this.optionId = 'editor_idXXXXXXX';
            this.$CSModal.createModal(this.randomId,this.optionId,{ 
                width:"400px",
                height:"600px",
                isHide:true,
            },{
                name: "demoModal",
                componentData:() => import('~/example/page/demo0'),
                componentProps:this.param,
                title:'测试实例'
            },{
                changeData:this.sayHello
            });
        },
        closeWin(){
            if(this.optionId){
                this.$CSModal.closeModal(this.optionId);  
            }
        },
        hideWin(){
            if(this.optionId){
                this.$CSModal.hideModal(this.optionId);  
            }
        }
    },
    mounted (){
        console.log(this.$CSModal)
    }
}
</script>

<style lang="less" scoped>
    @import "./index.less";
</style>